<template>
    <div class='content' id="salary">
        <div class="profile_page">
                <head-top  :go-back='goBack'  :head-title="profiletitle"></head-top>
        </div>
         <div class="formContain">
           <van-tabs v-model="active" :ellipsis="false" @click="onClick">
             <van-tab title="工资条查询">
               <div class="selectTime" @click="showdatepicker($event,'paySlipTime')">
                 <input type="text"  id="begin" placeholder="请选择时间" :value="datas.paySlipTime"  readonly>
               </div>
               <div v-show="PaySlip.length>0">
                 <titlebar :titleLeft='titleLeft'></titlebar>
                 <div class="newsItem">
                   <div class="itemContent">
										 <div v-for='item in PaySlip' :key="item.group_name">
											 <div class="itemConHead">{{item.group_name}}</div>
											 <div class="itemLists">
											 	<div class="itemList" v-for="(data,index) in item.items" :key="index">
											 		<span class="itemName">{{data.item_name}}</span>
											 		<span class="itemType">{{payItem[data.item_code]}}</span>
											 	</div>
											 </div>
										 </div>
                     
									</div>
                 </div>
             </div>
               <div v-show="PaySlip.length<=0" style="width: 100%;height: 3rem;line-height: 3rem;font-size: .6rem;text-align: center">暂无数据，请选择要查询工资明细的月份！</div>
             </van-tab>
            <!-- <van-tab title="奖金">
               <div class="selectTime" @click="showdatepicker1($event,'bonus')">
                <input type="text" placeholder="请选择时间" :value="datas.bonus"  readonly>
               </div>
               <div v-show="!bonusShow">
                 <titlebar :titleLeft='bounceTitle'></titlebar>
                 <div class="newsItem" v-if="bonusSlip.type=='staff'">
                   <div class="itemContent">
                     <div class="itemConHead">奖金</div>
                     <div class="itemLists">
                       <div class="itemList" >
                         <span class="itemName">绩效奖金</span>
                         <span class="itemType">{{bonusSlip.data.performanceBonus}}</span>
                       </div>
                         <div class="itemList" >
                             <span class="itemName">总经理基金</span>
                             <span class="itemType">{{bonusSlip.data.generalManagerFund}}</span>
                         </div>
                       <div class="itemList" >
                         <span class="itemName">特殊奖励</span>
                         <span class="itemType">{{bonusSlip.data.specialRewards}}</span>
                       </div>
                       <div class="itemList" >
                         <span class="itemName">安全奖</span>
                         <span class="itemType">{{bonusSlip.data.safetyAward}}</span>
                       </div>
                       <div class="itemList" >
                         <span class="itemName">置装费</span>
                         <span class="itemType">{{bonusSlip.data.installationFee}}</span>
                       </div>
                         <div class="itemList" >
                         <span class="itemName">年休假补助</span>
                         <span class="itemType">{{bonusSlip.data.annualLeaveAllowance}}</span>
                       </div>
                       <div class="itemList" >
                         <span class="itemName">其他奖励</span>
                         <span class="itemType">{{bonusSlip.data.otherRewards}}</span>
                       </div>
                       <div class="itemList" >
                         <span class="itemName">增加项小计</span>
                         <span class="itemType">{{bonusSlip.data.addTotal}}</span>
                       </div>
                       <div class="itemList" >
                         <span class="itemName">代扣工会会费</span>
                         <span class="itemType">{{bonusSlip.data.withholdingUnionDues}}</span>
                       </div>
                       <div class="itemList" >
                         <span class="itemName">其他扣罚</span>
                         <span class="itemType">{{bonusSlip.data.otherDeductions}}</span>
                       </div>
                       <div class="itemList" >
                         <span class="itemName">减少项小计</span>
                         <span class="itemType">{{bonusSlip.data.subTotal}}</span>
                       </div>
                         <div class="itemList" >
                             <span class="itemName">应发金额</span>
                             <span class="itemType">{{bonusSlip.data.amountPay}}</span>
                         </div>
                         <div class="itemList" >
                             <span class="itemName">当月实缴个税</span>
                             <span class="itemType">{{bonusSlip.data.perIncomeTax}}</span>
                         </div>
                         <div class="itemConHead" style="padding: 0"></div>
                         <div class="itemLists">
                             <div class="itemList" >
                                 <span class="itemName">实发金额</span>
                                 <span class="itemType">{{bonusSlip.data.realAmountPay}}</span>
                             </div>
                         </div>
                     </div>
                   </div>
                 </div>
                 <div class="newsItem" v-if="bonusSlip.type=='leader'">
                   <div class="itemContent">
                     <div class="itemConHead">{{bonusSlip.data[0].year}}领导绩效（预兑现）</div>
                     <div class="itemLists">
                       <div class="itemList" >
                         <span class="itemName">基薪标准</span>
                         <span class="itemType">{{bonusSlip.data[0].baseSalaryStandard}}</span>
                       </div>
                       <div class="itemList" >
                         <span class="itemName">预兑现比例</span>
                         <span class="itemType">{{bonusSlip.data[0].preCashRatio}}</span>
                       </div>
                       <div class="itemList" >
                         <span class="itemName">预兑现绩效</span>
                         <span class="itemType">{{bonusSlip.data[0].preCashPerformance}}</span>
                       </div>
                       <div class="itemList" >
                         <span class="itemName">绩效个税差额</span>
                         <span class="itemType">{{bonusSlip.data[0].performanceTaxDifference}}</span>
                       </div>
                       <div class="itemList" >
                         <span class="itemName">基薪个税差额</span>
                         <span class="itemType">{{bonusSlip.data[0].baseSalaryTaxDifference}}</span>
                       </div>
                       <div class="itemList" >
                         <span class="itemName">其他奖励</span>
                         <span class="itemType">{{bonusSlip.data[0].otherRewards}}</span>
                       </div>
                       <div class="itemList" >
                         <span class="itemName">其他扣罚</span>
                         <span class="itemType">{{bonusSlip.data[0].otherDeductions}}</span>
                       </div>
                       <div class="itemList" >
                         <span class="itemName">应发金额</span>
                         <span class="itemType">{{bonusSlip.data[0].amountPay}}</span>
                       </div>
                         <div class="itemList" >
                             <span class="itemName">当月实缴个税</span>
                             <span class="itemType">{{bonusSlip.data[0].perIncomeTax}}</span>
                         </div>
                     </div>
                     <div class="itemConHead" style="padding: 0"></div>
                     <div class="itemLists">
                           <div class="itemList" >
                               <span class="itemName">实发金额</span>
                               <span class="itemType">{{bonusSlip.data[0].realAmountPay}}</span>
                           </div>
                       </div>
                       <div class="itemConHead">{{bonusSlip.data[0].year}}领导绩效（实际兑现）</div>
                       <div class="itemLists">
                           <div class="itemList" >
                               <span class="itemName">绩效核定</span>
                               <span class="itemType">{{bonusSlip.data[1].performanceVerification}}</span>
                           </div>
                           <div class="itemList" >
                               <span class="itemName">基薪标准</span>
                               <span class="itemType">{{bonusSlip.data[1].baseSalaryStandard}}</span>
                           </div>
                           <div class="itemList" >
                               <span class="itemName">预兑现比例</span>
                               <span class="itemType">{{bonusSlip.data[1].preCashRatio}}</span>
                           </div>
                           <div class="itemList" >
                               <span class="itemName">已发绩效</span>
                               <span class="itemType">{{bonusSlip.data[1].sentPerformance}}</span>
                           </div>
                           <div class="itemList" >
                               <span class="itemName">剩余兑现</span>
                               <span class="itemType">{{bonusSlip.data[1].remainingCash}}</span>
                           </div>
                           <div class="itemList" >
                               <span class="itemName">其他奖励</span>
                               <span class="itemType">{{bonusSlip.data[1].otherRewards}}</span>
                           </div>
                           <div class="itemList" >
                               <span class="itemName">其他扣罚</span>
                               <span class="itemType">{{bonusSlip.data[1].otherDeductions}}</span>
                           </div>
                           <div class="itemList" >
                               <span class="itemName">应发金额</span>
                               <span class="itemType">{{bonusSlip.data[1].amountPay}}</span>
                           </div>
                           <div class="itemList" >
                               <span class="itemName">当月实缴个税</span>
                               <span class="itemType">{{bonusSlip.data[1].perIncomeTax}}</span>
                           </div>
                       </div>
                       <div class="itemConHead" style="padding: 0"></div>
                       <div class="itemLists">
                           <div class="itemList" >
                               <span class="itemName">实发金额</span>
                               <span class="itemType">{{bonusSlip.data[1].realAmountPay}}</span>
                           </div>
                       </div>
                       <div class="itemConHead">{{bonusSlip.data[0].year}}领导绩效（一次性兑现）</div>
                       <div class="itemLists">
                           <div class="itemList" >
                               <span class="itemName">绩效个税差额</span>
                               <span class="itemType">{{bonusSlip.data[2].performanceTaxDifference}}</span>
                           </div>
                           <div class="itemList" >
                               <span class="itemName">基薪个税差额</span>
                               <span class="itemType">{{bonusSlip.data[2].baseSalaryTaxDifference}}</span>
                           </div>
                           <div class="itemList" >
                               <span class="itemName">绩效核定</span>
                               <span class="itemType">{{bonusSlip.data[2].performanceVerification}}</span>
                           </div>
                           <div class="itemList" >
                               <span class="itemName">其他奖励</span>
                               <span class="itemType">{{bonusSlip.data[2].otherRewards}}</span>
                           </div>
                           <div class="itemList" >
                               <span class="itemName">其他扣罚</span>
                               <span class="itemType">{{bonusSlip.data[2].otherDeductions}}</span>
                           </div>
                           <div class="itemList" >
                               <span class="itemName">应发金额</span>
                               <span class="itemType">{{bonusSlip.data[2].amountPay}}</span>
                           </div>
                           <div class="itemList" >
                               <span class="itemName">当月实缴个税</span>
                               <span class="itemType">{{bonusSlip.data[2].perIncomeTax}}</span>
                           </div>
                       </div>
                       <div class="itemConHead" style="padding: 0"></div>
                       <div class="itemLists">
                           <div class="itemList" >
                               <span class="itemName">实发金额</span>
                               <span class="itemType">{{bonusSlip.data[2].realAmountPay}}</span>
                           </div>
                       </div>
                   </div>
                 </div>
               </div>
               <div v-show="bonusShow" style="width: 100%;height: 3rem;line-height: 3rem;font-size: .6rem;text-align: center">暂无数据，请选择要查询奖金明细的时间！</div>
             </van-tab>-->
             <van-tab title="社保、公积金和年金">
               <div class="selectTime" @click="showdatepicker($event,'SiPayment')">
                 <input type="text" placeholder="请选择时间" :value="datas.SiPayment"  readonly>
               </div>
               <div v-show="siPaymentSlip.length>0">
                   <titlebar :titleLeft="siPayTitle"></titlebar>
                   <div class="newsItem">
                     <div class="itemContent">
											 <div v-for="item in siPaymentSlip" :key="item.group_name">
												 <div class="itemConHead">{{item.group_name}}</div>
												 <div class="itemLists">
												 	<div class="itemList" v-for="(data,index) in item.items" :key="index">
												 		<span class="itemName">{{data.item_name}}</span>
												 		<span class="itemType">{{siPaymentItem[data.item_code]}}</span>
												 	</div>
												 </div>
											 </div>
                       
                       
                     </div>
                   </div>

               </div>
               <div v-show="siPaymentSlip.length<=0" style="width: 100%;height: 3rem;line-height: 3rem;font-size: .6rem;text-align: center">暂无数据，请选择要查询的月份！</div>
             </van-tab>
<!--               <van-tab title="考勤查询">
                   <div class="selectTime" @click="showdatepicker($event,'attendanceTime')">
                       <input type="text"  id="" placeholder="请选择时间" :value="datas.attendanceTime"  readonly>
                   </div>
                   <div v-show="!attendanceShow">
                       <titlebar :titleLeft='titleLeft'></titlebar>
                       <div class="newsItem">
                           <div class="itemContent">
                               <div class="itemConHead">出勤情况</div>
                               <div class="itemLists">
                                   <div class="itemList">
                                       <span class="itemName">应出勤（天）</span>
                                       <span class="itemType">{{attendanceSlip.workingDays}}</span>
                                   </div>
                                   <div class="itemList">
                                       <span class="itemName">实际出勤（天）</span>
                                       <span class="itemType">{{attendanceSlip.attendanceDays}}</span>
                                   </div>
                                   <div class="itemList">
                                       <span class="itemName">迟到（次）</span>
                                       <span class="itemType">{{attendanceSlip.belate}}</span>
                                   </div>
                                   <div class="itemList">
                                       <span class="itemName">早退（次）</span>
                                       <span class="itemType">{{attendanceSlip.leaveEarly}}</span>
                                   </div>
                                   <div class="itemList">
                                       <span class="itemName">漏签（次）</span>
                                       <span class="itemType">{{attendanceSlip.missingSign}}</span>
                                   </div>
                                   <div class="itemList">
                                       <span class="itemName">旷工（次）</span>
                                       <span class="itemType">{{attendanceSlip.miner}}</span>
                                   </div>
                                   <div class="itemList">
                                       <span class="itemName">公出（天）</span>
                                       <span class="itemType">{{attendanceSlip.leaveOut}}</span>
                                   </div>
                                   <div class="itemList">
                                       <span class="itemName">出差（天）</span>
                                       <span class="itemType">{{attendanceSlip.leaveTravel}}</span>
                                   </div>
                               </div>
                               <div class="itemConHead">请休假情况（天）</div>
                               <div class="itemLists">
                                   <div class="itemList">
                                       <span class="itemName">事假</span>
                                       <span class="itemType">{{attendanceSlip.leaverly}}</span>
                                   </div>
                                   <div class="itemList">
                                       <span class="itemName">病假</span>
                                       <span class="itemType">{{attendanceSlip.leaveSick}}</span>
                                   </div>
                                   <div class="itemList">
                                       <span class="itemName">因公病假</span>
                                       <span class="itemType">{{attendanceSlip.leaveSickOn}}</span>
                                   </div>
                                   <div class="itemList">
                                       <span class="itemName">年假</span>
                                       <span class="itemType">{{attendanceSlip.leaveAnnual}}</span>
                                   </div>
                                   <div class="itemList">
                                       <span class="itemName">婚假</span>
                                       <span class="itemType">{{attendanceSlip.leaveWedding}}</span>
                                   </div>
                                   <div class="itemList">
                                       <span class="itemName">产假及陪产假</span>
                                       <span class="itemType">{{attendanceSlip.leaveMaternity}}</span>
                                   </div>
                                   <div class="itemList">
                                       <span class="itemName">哺乳假</span>
                                       <span class="itemType">{{attendanceSlip.leaveBreastfeeding}}</span>
                                   </div>
                                   <div class="itemList">
                                       <span class="itemName">丧假</span>
                                       <span class="itemType">{{attendanceSlip.leaveFuneral}}</span>
                                   </div>
                               </div>
                               <div class="itemConHead">外派情况（天）</div>
                               <div class="itemLists">
                                   <div class="itemList">
                                       <span class="itemName">驻外（京津冀）</span>
                                       <span class="itemType">{{attendanceSlip.expatriateJjj}}</span>
                                   </div>
                                   <div class="itemList">
                                       <span class="itemName">驻外（非京津冀）</span>
                                       <span class="itemType">{{attendanceSlip.expatriateFjjj}}</span>
                                   </div>
                               </div>
                           </div>
                       </div>
                   </div>
                   <div v-show="attendanceShow" style="width: 100%;height: 3rem;line-height: 3rem;font-size: .6rem;text-align: center">请选择要查询考勤信息的月份！</div>
               </van-tab> -->
            <!-- <van-tab title="绩效结果">
               <div class="selectTime" @click="showdatepicker1($event,'czBevaResult')">
                 <input type="text" placeholder="请选择时间" :value="datas.czBevaResult"  readonly>
               </div>
               <div v-show="!czBevaResultShow">
                 <div v-for="item in czBevaResultSlip">
                   <titlebar :titleLeft='"绩效结果"'></titlebar>
                   <div class="newsItem">
                     <div class="itemContent">
                       &lt;!&ndash;<div class="itemConHead">缴费基数</div>&ndash;&gt;
                       <div class="itemLists">
                         <div class="itemList" >
                           <span class="itemName">年度</span>
                           <span class="itemType">{{item.year}}</span>
                         </div>
                         <div class="itemList" >
                           <span class="itemName">考核时间</span>
                           <span class="itemType">{{item.examineTime}}</span>
                         </div>
                         <div class="itemList" >
                           <span class="itemName">考核类别</span>
                           <span class="itemType">{{item.examineCategory}}</span>
                         </div>
                         <div class="itemList" >
                           <span class="itemName">考核结果</span>
                           <span class="itemType">{{item.examineResult}}</span>
                         </div>
                         <div class="itemList" >
                           <span class="itemName">年度/日常</span>
                           <span class="itemType">{{item.examineType}}</span>
                         </div>
                         <div class="itemList" >
                           <span class="itemName">最终低分</span>
                           <span class="itemType">{{item.finalScore}}</span>
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>

               </div>
               <div v-show="czBevaResultShow" style="width: 100%;height: 3rem;line-height: 3rem;font-size: .6rem;text-align: center">请选择要查询社保明细的年份！</div>
             </van-tab>-->
           </van-tabs>
         </div>
      <van-popup v-model="show" position="bottom">
        <van-datetime-picker  type="year-month" @confirm="datetimeSelect" @cancel='cancel' v-model="currentTime"/>
      </van-popup>
      <van-popup v-model="show1" position="bottom">
        <van-datetime-picker id="yearPicker"  type="year-month" @confirm="datetimeSelect1" @cancel='cancel1' v-model="currentTime1"/>
      </van-popup>
    </div>
</template>

<script>
    import headTop from '@/components/header/head'
     import titlebar from '@/components/titlebar3/titlebar3';
    import {getSalary,getBonus,getSiPayment,getCzbevaResult,getAttendanceResult,getBasicInfo} from '@/service/getData';
    import {getStore,getDefault} from '@/assets/config/mUtils';
    import { Dialog,Toast} from 'vant';
    import watermark from  '@/assets/config/water';
    export default {
    	data(){
            return{
                profiletitle:'信息查询',
	              siPayTitle:'社保公积金年金发放明细',
                goBack:true,
                titleLeft:'',
                bounceTitle:'',
                titleLeft1:'缴费基数',
                titleLeft2:'缴费明细',
                showPwd:true,
                salaryShow:true,
                bonusShow:true,
                SiPaymentShow:true,
	              attendanceShow:true,
                czBevaResultShow:true,
                PaySlip:[],
								payItem:'',
	              annuityFlag:'',
                bonusSlip:'',
                siPaymentSlip:[],
								siPaymentItem:'',
                czBevaResultSlip:'',
                attendanceSlip:'',
                active: 0,
                ifFirst: 0,
                showSalary:false,
                show:false, //控制日期显示隐藏
                show1:false, //控制日期显示隐藏
                pickershow:false,//控制下拉选显示隐藏
                pickerName:'',//当前控制日期的控件
                currentTime:new Date(),
                currentTime1:new Date(),
                code:'',
                fileName:'',
                datas:{
                  paySlipTime:'',
                  bonus:'',
                  SiPayment:'',
                  czBevaResult:'',
	              attendanceTime:'',
                },
              screenHeight:'',
              startManagerId:'',
              bussinessTable:'ACT_ATND_LEAVE',
              salaryDetail:[],
                title:'标题',//下拉框标题
                columns: []  //下拉框数据
            }
        },
        created(){
// 	        var data = {};
// 	        data.app_userId = getStore('user_id');
// 	        data.id = getStore('user_id');
// 	        data.CHECK_TIME = new Date().getTime().toString();
// 	        data.CHECK_SIGN = this.$md5(data.app_userId + data.CHECK_TIME + "3a28fba00c015e0df7f88556c91cb7fc");
// 	        getBasicInfo(data).then(res1 => {
// 		        console.log(res1);
// 		        this.annuityFlag = res1.data.annuityFlag;
// 	        });
          let createDate = new Date();
          this.datas.paySlipTime = createDate.getFullYear() + '-'+ this.addZero(createDate.getMonth()) ;
          this.datas.SiPayment = createDate.getFullYear() + '-'+ this.addZero(createDate.getMonth()) ;
          this.firstGetPaySlip();

        },
        mounted(){
          this.screenHeight = document.documentElement.clientHeight;
          var data = getDefault();
	        //watermark.set('测试名字 2020-01-21', "salary");
        },
        components:{
            headTop,
            titlebar
        },
      updated () {
        let that = this;
        this.$nextTick(function () {
          let $inputs = Array.from(document.getElementsByTagName('input'));
          /*let body = document.body;
          $inputs.forEach(item => { // 定时器是处理多个input间快速切换闪屏问题，可省略
              item.onblur = function () { // onblur是核心方法
                  clearTimeout(body.timer);
                  body.timer = setTimeout(() => {
                  window.scroll(0, 0);
                  window.innerHeight = window.outerHeight = that.screenHeight
                  }, 150)
              }
              item.onfocus = function () {
                  clearTimeout(body.timer)
              }
          })*/
          let body = document.body;
          $inputs.forEach(item => {
            item.onblur = function () { // onblur是核心方法
              window.scroll(0, 0);
              window.innerHeight = window.outerHeight = that.screenHeight;
              //console.log(that.screenHeight);
            }
          })
        })
      },
        methods:{
            datetimeSelect(value){
              this.show = false;
              var date = value;
              console.log(this.pickerName);
              if(this.pickerName == 'paySlipTime'){
								Toast.loading({
											duration: 0, // 持续展示 toast
											mask: true,
											message: '查询中',
										});
                var val = date.getFullYear() + '-'+ this.addZero(date.getMonth()+1) ;
                this.$set(this.datas,this.pickerName,val);
                var data = {};
                data.personId = getStore('user_id');
                data.month = this.datas.paySlipTime;
                data.app_userId = getStore('user_id');
                data.CHECK_TIME = new Date().getTime().toString();
                data.CHECK_SIGN = this.$md5(data.app_userId + data.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
                getSalary(data).then(res=>{
                  Toast.clear();
                  var salaryRes = res.data;
                  if(!salaryRes){
                    this.salaryShow = false;
                    this.PaySlip = [];
						return;
									}
                  this.PaySlip = salaryRes.group_list;
									this.payItem = salaryRes.payslip;
                  this.titleLeft = salaryRes.payslip.person_name +'的' +salaryRes.payslip.wage_time+'月工资单';
                  this.salaryShow = false;
                })
              }else if(this.pickerName == 'attendanceTime'){
                var val = date.getFullYear() + '-'+ this.addZero(date.getMonth()+1) ;
                this.$set(this.datas,this.pickerName,val);
                var data = {};
                data.personId = getStore('user_id');
                data.month = this.datas.attendanceTime;
                data.app_userId = getStore('user_id');
                data.CHECK_TIME = new Date().getTime().toString();
                data.CHECK_SIGN = this.$md5(data.app_userId + data.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
	              getAttendanceResult(data).then(res=>{
                  var salaryRes = res.data;
                  console.log(salaryRes);
		              if(salaryRes != null){
			              this.attendanceSlip = salaryRes;
			              this.titleLeft = val+'月考勤明细';
			              this.attendanceShow = false;
		              }else {
			              this.attendanceShow = true;
			              Dialog.alert({
				              title: '',
				              message: '没有考勤信息明细!'
			              });

		              }

                })
              }else if(this.pickerName == 'SiPayment'){
	              var val = date.getFullYear() + '-'+ this.addZero(date.getMonth()+1) ;
	              this.$set(this.datas,this.pickerName,val);
								Toast.loading({
											duration: 0, // 持续展示 toast
											mask: true,
											message: '查询中',
										});
	              var data = {};
	              data.personId = getStore('user_id');
//                data.personId = '07e099c3288c48e980c1c1d31476a0ea';
	              data.month = this.datas.SiPayment;
	              data.app_userId = getStore('user_id');
	              data.CHECK_TIME = new Date().getTime().toString();
	              data.CHECK_SIGN = this.$md5(data.app_userId + data.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
	              getSiPayment(data).then(res=>{
									Toast.clear();
		              var salaryRes = res.data;
		              console.log(salaryRes);
		              if(salaryRes!=null){
			              this.siPaymentSlip = salaryRes.group_list;
										this.siPaymentItem = salaryRes.si_fun_annuity;
		              }else {
                        this.siPaymentSlip = [];
			              Dialog.alert({
				              title: '',
				              message: res.msg
			              });
		              }

	              })
              }


            },
            datetimeSelect1(value){
            this.show1 = false;
            var date = value;
            var val = date.getFullYear() ;
            this.$set(this.datas,this.pickerName,val);
            console.log(this.pickerName);
            if(this.pickerName == 'bonus'){
              var data = {};
              data.personId = getStore('user_id');
              data.year = this.datas.bonus;
              data.app_userId = getStore('user_id');
              data.CHECK_TIME = new Date().getTime().toString();
              data.CHECK_SIGN = this.$md5(data.app_userId + data.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
              getBonus(data).then(res=>{
                var salaryRes = res.data;
                console.log(salaryRes);
                this.bonusSlip = salaryRes;
                this.bounceTitle = val+'年奖金';
                this.bonusShow = false;
              })
            }else if(this.pickerName == 'czBevaResult'){
                var data = {};
                data.personId = getStore('user_id');
//                data.personId = 'a9389a035560443ea83acd5dbe414414';
                data.year = this.datas.czBevaResult;
                data.app_userId = getStore('user_id');
                data.CHECK_TIME = new Date().getTime().toString();
                data.CHECK_SIGN = this.$md5(data.app_userId + data.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
                getCzbevaResult(data).then(res=>{
                  var salaryRes = res.data.data;
                  console.log(salaryRes);
                  if(salaryRes.length>0){
                    this.czBevaResultSlip = salaryRes;
                    this.czBevaResultShow = false;
                  }else {
                    Dialog.alert({
                      title: '',
                      message: '年度没有绩效结果!'
                    });
                  }


                })
              }

          },
          /*进来加载上一个月工资数据*/
          firstGetPaySlip(){
            Toast.loading({
              duration: 0, // 持续展示 toast
              mask: true,
              message: '查询中',
            });
            var data = {};
            data.personId = getStore('user_id');
            data.month = this.datas.paySlipTime;
            data.app_userId = getStore('user_id');
            data.CHECK_TIME = new Date().getTime().toString();
            data.CHECK_SIGN = this.$md5(data.app_userId + data.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
            getSalary(data).then(res=>{
              Toast.clear();
              var salaryRes = res.data;
              if(!salaryRes){
                this.salaryShow = false;
                this.PaySlip = [];
                return;
              }
              this.PaySlip = salaryRes.group_list;
              this.payItem = salaryRes.payslip;
              this.titleLeft = salaryRes.payslip.person_name +'的' +salaryRes.payslip.wage_time+'月工资单';
              this.salaryShow = false;
            })
          },
          firstGetSiPayment(){
            Toast.loading({
              duration: 0, // 持续展示 toast
              mask: true,
              message: '查询中',
            });
            var data = {};
            data.personId = getStore('user_id');
            data.month = this.datas.SiPayment;
            data.app_userId = getStore('user_id');
            data.CHECK_TIME = new Date().getTime().toString();
            data.CHECK_SIGN = this.$md5(data.app_userId + data.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
            getSiPayment(data).then(res=>{
              Toast.clear();
              var salaryRes = res.data;
              console.log(salaryRes);
              if(salaryRes!=null){
                this.siPaymentSlip = salaryRes.group_list;
                this.siPaymentItem = salaryRes.si_fun_annuity;
              }else {
                this.siPaymentSlip = [];
                Dialog.alert({
                  title: '',
                  message: res.msg
                });
              }

            })
          },
          onClick(name, title){
            console.log(title);
            if(title == '社保、公积金和年金'){
              if(this.ifFirst<1){
                this.firstGetSiPayment();
              }
              this.ifFirst +=1;
            }
          },
            cancel() {
                this.show = false;
            },
          cancel1() {
            this.show1 = false;
          },
            showdatepicker(event,name){
                this.show = true;
                this.pickerName = name;
            },
          showdatepicker1(event,name){
            this.show1 = true;
            this.pickerName = name;
          },
            showpicker(event,name,title){
                this.pickershow = true;
                this.pickerName = name;
                this.title = title;
            },
          addZero(num){
            var addNum = num<10?"0"+num:num;
            return addNum;
          },


        }
    }

</script>

<style lang="scss" scoped>
    @import '../../assets/style/mixin';
    @import '../../assets/style/public';
    .formContain{
        background: #fff;
      >table{
        width: 100%;
        border-collapse: collapse;
        td{
          font-size: .56rem;
          color: #444;
          border-bottom: 1px solid #e0e0e0;
          line-height: 2rem;
          text-align: center;
          width: 33.3%;
        }
      }
        ul{
            padding: 0 .54rem;
            .flex{
                justify-content: space-between;
                align-items: center;
                line-height: 2rem;
                border-bottom: 1px solid #e0e0e0;
                padding: 0 .3rem;
                &:nth-last-of-type(1){
                    border: none;
                }
                .label{
                    font-size: .56rem;
                    line-height: 2rem;
                    color: #333333;
                }
                div{
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    position: relative;
                    flex-grow: 1;
                    img{
                        width: .68rem;
                        height: .64rem;
                    }
                    input{
                        color: #323233;
                        text-align: right;
                        font-size: .48rem;
                        padding-right: .48rem;
                        border: none;
                        &:-ms-input-placeholder{
                             color: #aaa;
                             font-size: .48rem;

                        }
                    }
                    .file{
                        width: 2rem;
                        height: 1rem;
                        font-size: 10rem;
                        opacity: 0;
                        position: absolute;
                        right: 0;
                    }
                    .van-cell{
                        font-size: .48rem;
                        padding-right: .48rem;
                        padding: 0;
                        color: #aaa;
                        .van-field__control{
                            color: #aaa;
                        }
                    }

                }
            }
        }
    }
    .foot-button{
        margin-top: 2rem;
        margin-bottom: .4rem;
        .cancel-btn{
            margin-right: 1rem;
        }
    }

    .require{
      color: red;
      margin-right: 4px;
      font-style: inherit;
      font-size: 14px;
    }
  .showPwd{
    margin-top: 7rem;
  }
  .selectTime{
    border-bottom: 1px solid #eee;
    input{
      width: 97%;
      text-align: center;
      border: none;
      height: 33px;
      font-size: 0.6rem;
    }
  }
    .newsItem{
      padding-top: 0.5rem;
      .itemDate{
        display: flex;
        justify-content: center;
        font-size:0.6rem;
        color: #cccccc;
        height: 1.6rem;
        line-height:1.6rem;
      }
      .itemContent{
        margin: 0 0.5rem;
        background-color: #fff;
        padding: 0 0.4rem;
        border-top-left-radius: 0.2rem;
        border-top-right-radius: 0.2rem;
        position: relative;
        z-index: 99;
        .itemConHead{
          display: flex;
          align-items: center;
          font-size: 0.6rem;
          color: #333333;
          line-height: 0.8rem;
          padding:0.6rem 0;
          border-bottom: 1px solid #eee;
          justify-content: center;
          font-weight: 600;
        }
        .itemLists{
          padding: 0.08rem;
          .itemList{
            display: flex;
            padding: 0.32rem 0;
            align-items: center;
            justify-content: flex-end;
            .itemName{
              color: #999999;
              font-size: 0.56rem;
              flex: 1;
              word-break: keep-all;
            }
            .itemType{
              margin-left: 0.4rem;
              color: #666666;
              font-size:0.56rem;
              width:5rem;
              white-space: normal;
              word-break: break-all;
              text-align: right;
            }
          }
        }
      }
      .itemNav{
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #1f9eff;
        font-size:0.6rem;
        height: 1.2rem;
        line-height:1.2rem;
        margin: 0 0.5rem;
        padding: 0.4rem;
        background-color: #fff;
        border-bottom-left-radius: 0.2rem;
        border-bottom-right-radius:0.2rem;
        overflow: hidden;

      }
    }
    /deep/  #yearPicker .van-picker__columns>div:nth-of-type(2){
    display: none;
  }
    /deep/ .van-tabs__line{
        background-color:$blue;
    }
</style>
